<template>
  <div class="search-suggestion">
    <van-cell 
      :title="str" 
      icon="search"
      v-for="(str,index) in suggestions"
      :key="index"
      @click="$emit('search',str)"
    >
      <div slot="title" v-html="highlight(str)"></div>
    </van-cell>
  </div>
</template>

<script>
// @ 等价于 /src 这个目录，免得你写麻烦又易错的相对路径
import { getSearchSuggestions} from '@/api/search'
// lodash 支持按需加载，有利于打包结果优化
//不建议下面这样使用，因为这样会加载整个模块。
import { debounce } from "lodash"

// import _ from 'lodash'
// _.debounce()
//函数防抖 单位时间调用多次，方法只会执行一次
// const fu = _.debounce(function () {
//   console.log('hello');
// },1000)

// fn()

export default {
  name: 'SearchSuggestion',
  components: {},
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      suggestions:[],//联想建议数据聊表
      htmlStr: 'Hello <span style="color:red">world</span>',
    }
  },
  computed: {},
  watch: {
    //属性名： 要监视的数据的名称 为data或者props的数据
    // searchText(){
    //   console.log('hello');
    // }

    //这才是监视的完整写法
    searchText:{
      //当数据发生变化则会执行handler处理函数
      // async handler () {
      //   //找到数据接口
      //   //请求获取数据
      //   //模板绑定展示
      //   const {data} = await getSearchSuggestions(this.searchText)
      //   this.suggestions = data.data.options
      // },
      
      //函数防抖
      handler: debounce(async function () {
        const {data} = await getSearchSuggestions(this.searchText)
        this.suggestions = data.data.options
      }, 1000),
      immediate: true // 该回调将会在侦听开始之后被立即调用
    }
  },
  created () {},
  mounted () {},
  methods: {
    highlight (str) {
      //  a /a/gi、vue /vue/gi
      //  正则表达式 /中间的内容/都会当作正则匹配模式字符来对待
      //  错误写法：/this.searchText/gi
      //  RegExp是正则表达式的构造函数
      //  参数1：字符串
      //  参数2：匹配模式
      //  返回值：正则对象

      //  第一种
      // return str.replace(
      //   new RegExp(this.searchText,'gi'),
      //   `<span style="color:red">${this.searchText}</span>`
      // )

      //第二种
      const reg = new RegExp(this.searchText,'gi')
      return str.replace(reg,`<span style="color:red">${this.searchText}</span>`)
    }
  }
}
</script>

<style scoped lang="less"></style>